<template>
	<view class="container">
		<view class="gaps">

		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				常用分类
			</view>
			<view class="panel-body">
				<uni-list>
					<uni-list-item v-for="(item,index) in normalCate" :key="item.id">
						<template v-slot:header>
							{{item.name}}({{item.goodsCount}})
						</template>
						<template v-slot:footer>
							<view class="move-opre">
								<view class="edit" @click="editCategory(item)">
									修改
								</view>
								<view class="fenge">
				
								</view>
								<view class="delete" @click="delCategory(item)">
									删除
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				
				<view class="manage-add">
					<button type="primary" size="mini" @click="addCategory(1)">添加分类</button>
				</view>
			</view>
		</view>
		<view class="gaps">
		
		</view>
		<view class="sq-panel">
			<view class="panel-tip">
				营销分类
			</view>
			<view class="panel-body">
				<uni-list>
					<uni-list-item v-for="(item,index) in yingxiaoCate" :key="item.id">
						<template v-slot:header>
							{{item.name}}({{item.goodsCount}})
						</template>
						<template v-slot:footer>
							<view class="move-opre">
								<view class="edit" @click="editCategory(item)">
									修改
								</view>
								<view class="fenge">
				
								</view>
								<view class="delete" @click="delCategory(item)">
									删除
								</view>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<view class="gaps">
				
				</view>
				<view class="manage-add">
					<button type="primary" size="mini" @click="addCategory(2)">添加分类</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsType,
		addGoodsType,
		editGoodsType,
		delGoodsType
	} from '@/api/shops/categoryManage/categoryManage.js'

	export default {
		data() {
			return {
				itemHeight: 30,
				shopId: 0,
				categories: {},
				yingxiaoCate:[],
				normalCate:[],
				eventChannel: undefined
			}
		},
		onLoad: function(option) {
			this.eventChannel = this.getOpenerEventChannel();
			this.shopId = option.shopId
			this.init()
		},
		methods: {
			init() {
				getGoodsType(this.shopId).then((res) => {
					res.forEach(e => {
						if(e.type === 1) {
							this.normalCate.push(e)
						} else {
							this.yingxiaoCate.push(e)
						}
					})

				})
			},
			editCategory(category) {
				let _this = this
				uni.showModal({
					title: "修改为",
					content: category.name,
					editable: true,
					success(res) {
						if (res.confirm) {
							if (res.content.trim() !== category.name) {
								let form = {
									id: category.id,
									shopId: category.shopId,
									name: res.content.trim()
								}
								editGoodsType(form).then((rs) => {

								if(category.type == 1) {
									_this.normalCate.forEach((item, i) => {
										if (item.id === category.id) {
											item.name = res.content.trim()
										}
									})
								} else {
									_this.yingxiaoCate.forEach((item, i) => {
										if (item.id === category.id) {
											item.name = res.content.trim()
										}
									})
								}
									// _this.categories.forEach((item, i) => {
									// 	if (item.id === category.id) {
									// 		item.name = res.content.trim()
									// 	}
									// })
									_this.eventChannel.emit('categoryChanged',{data:true})

								})
							}
						}
					}
				})
			},
			delCategory(category) {
				if (category.goodsCount > 0) {
					return uni.showToast({
						icon: 'none',
						title: '该分类下有商品，不允许删除'
					})
				}

				let _this = this
				uni.showModal({
					title: '确认删除吗?',
					success(res) {
						if (res.confirm) {
							let form = {
								id: category.id,
								shopId: category.shopId
							}
							delGoodsType(form).then((res) => {
								if(category.type == 1) {
									_this.normalCate.forEach((item, i) => {
										if (item.id === category.id) {
											_this.normalCate.splice(i, 1)
										}
									})
								} else {
									_this.yingxiaoCate.forEach((item, i) => {
										if (item.id === category.id) {
											_this.yingxiaoCate.splice(i, 1)
										}
									})
								}
								_this.eventChannel.emit('categoryChanged',{data:true})
							})
						}
					}
				})
			},
			addCategory(c) {
				let _this = this;
				uni.showModal({
					title: '请输入分类名',
					editable: true,
					success(res) {
						if (res.confirm) {
							if (res.content.trim()) {
								let form = {
									shopId: _this.shopId,
									name: res.content,
									type: c || 1
								}
								addGoodsType(form).then((res) => {
									if(c === 1) {
										_this.normalCate.push(res)
									} else {
										_this.yingxiaoCate.push(res)
									}
									_this.eventChannel.emit('categoryChanged',{data:true})
									
								})
							}
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.manage-area {
		margin-top: 10px;
		background-color: #fff;
		display: flex;
		padding: 10px;
		flex-direction: column;

		.manage-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ababab;
			padding: 10px 0;
		}

		.move-area {
			width: 100vw;
			// height: 400rpx;
			min-height: 200rpx;
			background-color: #fff;
			margin-top: 10px;

			.move-item {
				width: 100%;
				// height: 50px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ababab;
				padding: 10px 0;

				.move-tip {
					font-weight: bold;
				}
			}
		}
	}

	.move-opre {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-decoration: underline;

		.fenge {
			border-right: 1px solid #000;
		}

		view {
			margin-right: 15px;
		}
	}
	
	.fenge {
		border-right: 1px solid #000;
	}

	.manage-add {
		margin-top: 10px;
		background-color: #fff;
		padding: 10px;
		display: flex;

	}
</style>